<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,usesr-scalable=0">
    <meta name="keywods" content="">
    <meta name="description" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="blank">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频</title>
    <!-- <link rel="shortcut icon" href="./images/logo.ico"> -->
    <!-- <link rel="stylesheet" href="./css/reset.css"> -->
    <link rel="stylesheet" href="__INDEX__/css/swiper.min.css">
    <link rel="stylesheet" href="__INDEX__/css/video.css">
    <link rel="stylesheet" href="__INDEX__/css/top.css">
    <script src="__INDEX__/js/flexible_css.js"></script>
    <script src="__INDEX__/js/flexible.js"></script>
    <script src="__INDEX__/js/jquery-1.12.4.min.js"></script>
    <script src="__INDEX__/js/swiper.jquery.min.js"></script>
</head>
<body>
<div class="wrap">
    {include file="public/header" /}


    <div class="content">
        <h3>视频专区</h3>

        <ul>
            {volist name="data" id="da"}
            <li>
                <video  class="video" id="video1" poster="{$da.pic}" webkit-playsinline=""
                        playsinline="" x5-playsinline="" x-webkit-airplay="allow" >
                    <!-- <source src="langbo.webm" type="video/mp4"> -->
                    <source src="/{$da.video}" type="video/mp4">
                    你的浏览器不支持h5播放器
                </video>

                <section class="btn">
                    <img src="__INDEX__/images/dianjibofang-.png" alt="播放" class="bofang">
                    <img src="__INDEX__/images/dianjizaiting.png" alt="暂停" style="display: none" class="zanting">
                </section>

                <div>
                    <span class="des">{$da.video_name}</span>
                    <span class="date">{$da.create_time|substr=5,5}</span>
                </div>

            </li>
            {/volist}
        </ul>
        {/volist}
    </div>

    <!-- 底部导航栏 -->
    {include file="public/footer" /}

</div>
</body>
<script>

    $('.header ul li a').eq(0).css('color','#0860a8')
    // console.log(document.getElementById('video1').paused)
    // console.log(document.getElementById('video1'))
    $('.bofang').click(function (e) {
        //  e.stopPropagation();
        var theVideo =  $(this).parent().siblings('.video');
        console.log(theVideo)
        theVideo.trigger('play');
        $(this).parent().hide();
        //  console.log($(this).parent().siblings('.video').paused)
        console.log('333333',$(this).parents('li').siblings())
        $(this).parents('li').siblings().children('.video').trigger('pause');
        $(this).parents('li').siblings().children('.video').siblings('.btn').css('display','block');

        console.log(theVideo[0].paused)
        if(theVideo[0].paused == false){
            console.log(2222)
            $(this).on('touchstart',function(){
                $(this).parents('li').siblings().children('.video').siblings('.btn').css('display','block');

            })
        }
    })

</script>
</html>